<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ReactJs 引入 Html 练习</title>
</head>
<body>

<div id="show-dev"></div>

<script src="js/react.development.js" crossorigin></script>
<script src="js/react-dom.development.js" crossorigin></script>
<script src="js/babel.js"></script>

<script type="text/babel">
    const data = ['JAVA', 'ReactJs', "GoLang"];
    /*创建虚拟DOM*/
    const myId = 'userId';
    const VDOM = (
        <div>
            <h2 className="title" id={myId.toLowerCase()}>
                <span style={{color: 'red'}}> {myId.toLowerCase()} </span>
            </h2>
            <ul>
                {
                    data.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
    /*渲染虚拟DOM*/
    ReactDOM.render(VDOM, document.getElementById('show-dev'));
</script>

</body>
</html>